const svg = d3.select('svg'),
  width = svg.attr('width'),
  height = svg.attr('height');
  
let projection = d3.geoMercator();//二维平面地图
  projection = d3.geoOrthographic();//地球二维投影
  projection = d3.geoStereographic();//二维立体投影
  projection = d3.geoEquirectangular();//带网格的二维平面地图
  projection = d3.geoNaturalEarth1();//生成普通地球地图

  
  
const bubbleSort = array => {
  console.log(typeof array[0]);
  for(let i=1;i<array.length;i++){
    for(let j=0;j<array.length-i;j++){
      if(array[j] > array[j+1]){
        let temp = array[j];
        array[j] = array[j+1];
        array[j+1] = temp;
      }
    }
  }
};

const path = d3.geoPath()
    .projection(projection);  
const g = svg.append('g');

svg.call(d3.zoom().on('zoom', () => {
    g.attr('transform', d3.event.transform);
}));

g.append('path')
  .attr('d', path({type: 'Sphere'}))
  .attr('class', 'sphere');

Promise.all([
  d3.tsv('../50m.tsv'),
  d3.json('../50m.json')
]).then (([tsvData, jsonData]) => {
    
    //传统后端思想,查
    const getCountryNameById = id => {
      return tsvData.filter(item => item.iso_n3 == id)[0].name;
    }
    
    
    //另一种方法,将所有的countryname赋值给一个数组
    const countryName = {};
    tsvData.forEach(d => {
      countryName[d.iso_n3] = d.name;
    });
    
    //使用reduce()
    const countryName1 = tsvData.reduce((accumulator, d)=>{
      accumulator[d.iso_n3] = d.name;
      return accumulator;
    },{});
    
    
    const countries = topojson.feature(jsonData, jsonData.objects.countries);
    const paths = g.selectAll('path')
      .data(countries.features)
      .enter()
      .append('path')
        .attr('d', d => path(d))
        .attr('class', 'country')
      .append('title')
        //.text(d => getCountryNameById(+d.id));//查就完事了
        .text(d => countryName1[d.id]);//从已有数组中找对应id的元素
  });